import { useEffect } from "react";
import { useParams } from "react-router";
import { useOneComm } from "../../hook/oneComm";
import { Upload, Button, Card ,Breadcrumb} from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import CommsApi from "../../api/comms"
import _ from "lodash"



// eslint-disable-next-line
export default () => {
    const { _id } = useParams();
    console.log(_id);
    const [comm, { getOneComm }] = useOneComm()

    useEffect(() => {
        getOneComm(_id)
    }, [getOneComm, _id])
    const posterList = _.map(comm.poster, (item, index) => {
        return {
            uid: -index,
            name: `${index + 1}.png`,
            status: 'done',
            url: `http://localhost:3002${item}`
        }
    });

    const imageList = _.map(comm.image, (item, index) => {
        return {
            uid: -index,
            name: `${index + 1}.png`,
            status: 'done',
            url: `http://localhost:3002${item}`
        }
    });

    // 移除海报时触发
    const removePoster = async ({ url }) => {
        // replace 替换
        const newurl = url.replace("http://localhost:3002", "");
        await CommsApi.deletePoster({ _id, url: newurl });
        getOneComm(_id)
    }

    // 移除详情图片时触发
    const removeImage = async ({ url }) => {
        // replace 替换
        const newurl = url.replace("http://localhost:3002", "");
        await CommsApi.deleteImg({ _id, url: newurl });
        getOneComm(_id)
    }

    return (
        <div className="site-card-border-less-wrapper">
            <Card>
                <Breadcrumb>
                    <Breadcrumb.Item>主页</Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="http://localhost:3000/#/info/comms">商品</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="">上传商品图片</a>
                    </Breadcrumb.Item>
                </Breadcrumb>
            </Card>
            <Card title="商品海报" bordered={true} style={{ margin: "30px" }}>

                <Upload
                    action={`/resource/comms/uploadPoster/${_id}`}
                    listType="picture"
                    defaultFileList={[...posterList]}
                    className="upload-list-inline"
                    onRemove={removePoster}
                >
                    <Button icon={<UploadOutlined />}>Upload</Button>
                </Upload>
            </Card>
            <Card title="商品详情图" bordered={true} style={{ margin: "30px" }}>
                <Upload
                    action={`/resource/comms/upload/${_id}`}
                    listType="picture"
                    defaultFileList={[...imageList]}
                    onRemove={removeImage}
                    className="upload-list-inline"
                >
                    <Button icon={<UploadOutlined />}>Upload</Button>
                </Upload>
            </Card>
        </div>
    )
}